<template>
	<div>
		<div v-for="(canvasData, index) in canvases" :key="index">
			<canvas :id="`canvas-${index}`" :width="canvasData.width" :height="canvasData.height"></canvas>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				canvases: [{
						width: 400,
						height: 300,
						context: {
							amount: "2016.00",
							billing_no: "B-1-9茶百道-20250224-719",
							created_at: "2025-02-24 12:38:16",
							dates: "2025-01",
							fd_order_no: "PA20250303143001137059",
							fee_period: "2025年1月",
							fee_type: "电费"
						},
						fd_order_no: "第三个PA20250303143001137059",
					},
					{
						width: 400,
						height: 300,
						context: {
							amount: "2016.00",
							billing_no: "B-1-9茶百道-20250224-719",
							created_at: "2025-02-24 12:38:16",
							dates: "2025-01",
							fd_order_no: "PA20250303143001137059",
							fee_period: "2025年1月",
							fee_type: "电费"
						},
						fd_order_no: "第二发给我PA20250303143001137059",
					},
					{
						width: 400,
						height: 300,
						context: {
							amount: "2016.00",
							billing_no: "B-1-9茶百道-20250224-719",
							created_at: "2025-02-24 12:38:16",
							dates: "2025-01",
							fd_order_no: "PA20250303143001137059",
							fee_period: "2025年1月",
							fee_type: "电费"
						},
						fd_order_no: "第三个PA20250303143001137059",
						
					}
					// 可以添加更多画布配置
				]
			};
		},
		mounted() {
			this.initCanvases();
		},
		methods: {
			initCanvases() {
				this.canvases.forEach((canvasData, index) => {
					const canvas = document.getElementById(`canvas-${index}`);
					canvasData.context = canvas.getContext('2d');
					// 可以在这里初始化画布，例如绘制一些基本图形或背景等
					this.drawSomething(canvasData.context, index,canvasData);
				});
			},
			drawSomething(context, index,canvasData) {
				context.fillStyle = 'blue';
				context.fillRect(10, 10, 100, 100); // 例如，在每个画布上绘制一个蓝色方块
				context.font = "bold 22px sans-serif"; //对字体进行设置
				context.fillStyle = "#000";
				context.textAlign = "center"; //文本对齐方式				
				context.fillText(canvasData.fd_order_no, 185, 50); //描绘文本
			}
		}
	};
</script>